vite + react 相关配置

#vite + react 相关配置| 来源: 网络整理| 查看: 265

1、使用Vite搭建React项目,选项选react - ts ，运行速度真的很快

npm create vite@latest vite-project cd vite-project npm install npm run dev

2、设置一下路径别名，需要安装一下path

npm install @types/node --save-dev

import { defineConfig } from 'vite' import {resolve} from 'path' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { '@': resolve(__dirname,'src') } } })

同时修改一下tsconfig.json,让IDE能识别这个别名，加入paths

"compilerOptions": { "paths": { "@/*": ["./src/*"] } },

3、安装less,结合antd进行配置,安装 less（切记，因为 less 没有在代码中 import，所以将其放在 devDependencies 中）

npm install less -D

npm install antd

vite.config.ts

export default defineConfig({ plugins: [react()], resolve: { alias: { '@': resolve(__dirname,'src') } }, css: { preprocessorOptions: { less: { javascriptEnabled: true, modifyVars: { "primary-color": "#EAA516", //全局样式 }, } } } })

引入antd 在main.ts中

import 'antd/dist/antd.less'

可能会报错：Internal server error: Failed to resolve import "antd/dist/antd.less" from "src/main.tsx". Does the file exist?

解决方案：降低antd的版本：npm install [email protected]

【本文地址】

公司简介

联系我们